<template>
    <div class="header-container">
        <ul ref="navHeader" class="mb-header">
            <li
                v-for="(item, index) in navList"
                :key="index"
                class="header-item"
                :class="router == item.url ? 'active' : ''"
                @click="fnGoPage(item.url, item.target)"
            >
                {{ item.name }}
            </li>
        </ul>
        <div class="head-more-btn" @click.stop="fnToggleMase"></div>
        <div v-show="showMask" class="page-mask" @click="showMask = false">
            <ul
                class="page-nav animated"
                :class="showMask ? 'fadeInRight' : 'fadeOutRight'"
            >
                <li
                    v-for="(item, index) in navList"
                    :key="index"
                    :class="router == item.url ? 'active' : ''"
                    @click="fnGoPage(item.url, item.target)"
                >
                    {{ item.name }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: 'MbHeader',
    data() {
        return {
            showMask: false,
            router: '/',
            navList: [
                {
                    id: 1,
                    name: '校园商城入驻',
                    active: true,
                    url: '/'
                },
                {
                    id: 2,
                    name: '解决方案',
                    active: false,
                    url: '/solutions'
                },
                {
                    id: 3,
                    name: '产品矩阵',
                    active: false,
                    url: '/products'
                },
                {
                    id: 4,
                    name: '校园品牌说',
                    active: false,
                    url: '/brand'
                },
                {
                    id: 5,
                    name: '新闻动态',
                    target: '_blank',
                    active: false,
                    url: '//nm.zsdx.cn'
                }
            ]
        }
    },
    watch: {
        $route(newValue, oldValue) {
            this.router = newValue.path
        }
    },
    created() {
        this.router = this.$route.path
    },
    methods: {
        fnToggleMase() {
            this.showMask = !this.showMask
        },
        fnGoPage(url, target) {
            this.showMask = false

            if (target && target === '_blank') {
                window.location.href = url
                return
            }

            // 临时处理
            const nav = this.$refs.navHeader

            if (url === '/brand') {
                nav.scrollLeft = 300
            }

            if (url === '/') {
                nav.scrollLeft = 0
            }

            this.$router.push({ path: url })
        }
    }
}
</script>

<style lang="less" scoped>
.header-container {
    height: 0.79rem;
}
.mb-header {
    width: 6.71rem;
    height: 0.8rem;
    background: rgba(12, 23, 39, 1);
    box-shadow: 0px 1px 2px 0px rgba(5, 15, 30, 0.47);
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 99;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    transition: 0.3s;
    .header-item {
        font-size: 0.28rem;
        color: rgba(255, 255, 255, 0.87);
        padding-left: 0.4rem;
        flex-shrink: 0;
        &.active {
            color: #20a0ff;
            position: relative;
            &:after {
                content: '';
                position: absolute;
                width: 0.36rem;
                height: 0.04rem;
                bottom: -0.15rem;
                left: 50%;
                margin-left: -0.02rem;
                background: rgba(32, 160, 255, 1);
                border-radius: 2px;
            }
        }
    }
}
.head-more-btn {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 0.8rem;
    height: 0.8rem;
    z-index: 99;
    background-color: rgba(12, 23, 39, 1);
    background-image: url('//cdn.zsdx.cn/zsdx-website/2020mobile/images/index-item-search.png');
    background-size: 0.4rem 0.4rem;
    background-repeat: no-repeat;
    background-position: center center;
    box-shadow: 0px 1px 2px 0px rgba(5, 15, 30, 0.47);
}

.page-mask {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 102;
    background: rgba(0, 0, 0, 0.6);
    transition: all 0.5s;

    .page-nav {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        width: 3.5rem;
        height: 100vh;
        background: #fff;
        z-index: 103;
        padding-top: 0.4rem;
        li {
            padding: 0.4rem;
            box-shadow: 0 1px 0 0 #f4f4f4;
            &.active {
                color: #20a0ff;
            }
        }
    }
}

.animated {
    animation-duration: 0.5s;
    animation-fill-mode: both;
}
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInRight {
    animation-name: fadeInRight;
}
@keyframes fadeOutRight {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}

.fadeOutRight {
    animation-name: fadeOutRight;
}
</style>
